<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="container"></div>
		<div id="div_">
			
		</div>
	</body>
	<script type="text/javascript">
		

		//radar.js
(function() {
            var Radar = function(cfg) {
            var outContainer = document.querySelector(cfg.el);
            var container = document.getElementById("div_")
            var cans = document.createElement("canvas");
            container.appendChild(cans);
            outContainer.appendChild(container);

            var ctx = cans.getContext("2d");
            var data = cfg.data;
            var w = cfg.width;
            var h = cfg.height;
            container.style.position = "relative";
            container.style.width = w+"px";
            container.style.height = h+"px";
            cans.width = w;
            cans.height = h;

            var step = data.length;
            var r = w/2;

            //绘制网格背景
            var isBlue = false;

            for(var s = 10; s > 0; s--) {
                ctx.beginPath();
                for(var i=0;i<step;i++) {
                    var rad = 2*Math.PI/step * i;
                    var x = r + Math.sin(rad)*r*(s/10);
                    var y = r + Math.cos(rad)*r*(s/10);
                    ctx.lineTo(x, y);
                }
                ctx.closePath();
                ctx.fillStyle = (isBlue = !isBlue)?'#99c0ff' : '#f1f9ff';
                ctx.fill();
            }


            //绘制伞骨
            ctx.beginPath();
            for(var i=0;i<step;i++) {
                var rad = 2*Math.PI/step * i;
                var x = r + Math.sin(rad)*r;
                var y = r + Math.cos(rad)*r;
                ctx.moveTo(r,r);
                ctx.lineTo(x, y);

                var text = document.createElement("div");
                text.innerHTML = data[i][0];
                text.style.position = "absolute";

                //添加文本
                if(x > r) {
                    text.style.left = ( x + 10) + 'px';
                } else {
                    text.style.right = (w-x +5) + 'px';
                }

                if(y > r) {
                    text.style.top = y + 'px';
                } else {
                    text.style.bottom = (h - y) + 'px';
                }
                container.appendChild(text);
            }
            ctx.strokeStyle = "#e0e0e0"
            ctx.stroke();

            //绘制折线
            ctx.strokeStyle = "#f00";
            ctx.beginPath();

            for(var i=0;i<step;i++) {
                var rad = 2*Math.PI/step * i;
                var x = r + Math.sin(rad)*r*data[i][1];
                var y = r + Math.cos(rad)*r*data[i][1];
                ctx.lineTo(x,y);
            }
            ctx.closePath();
            ctx.stroke();

            //添加数据点
            ctx.fillStyle = "#ff7676";
            for(var i=0;i<step;i++) {
                var rad = 2*Math.PI/step * i;
                var x = r + Math.sin(rad)*r*data[i][1];
                var y = r + Math.cos(rad)*r*data[i][1];
                ctx.beginPath();
                ctx.arc(x,y,4,0,2*Math.PI);
                ctx.fill();
                ctx.closePath();
            }


        }
        window["Radar"] = Radar;
    })();

		var radar = new Radar({
    el: "#container",
    width: 300,
    height: 300,
    data: [["HTML", 0.5], ["CSS", 0.6], ["JS", 0.9], ["jQuery", 0.8], ["React", 0.7]]
});
	</script>
</html>
